import React from 'react';
import ReactDOM from 'react-dom';

//优点：
//1.样式之间不会有冲突。
//2.可以动态获取当前state中的状态
//缺点：
//1.写法驼峰。
//2.写在对象里样式没有提示。
//3.代码混乱
//4.某些样式无法编写伪类/伪元素
// import App from './1_内联样式/App';


//缺点：
//1.普通的css属于全局的css，样式之间会相互影响，相互层叠掉（后者会层叠掉前者）
// import App from './2_普通的css/app';


//优点：
//1.确实解决了局部作用于的问题
//缺点：
//1.引用的类名，不能使用连接符（.home-tile），在javascript中是不识别的。
//2.所有的className都必须使用{style.className}的形式编写。
//3.不方便动态来修改某些样式，依然需要使用内联样式的方式。
// import App from './3_css_modules/app';

import App from './4_styled_components/app';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
